<script setup lang="ts">
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  description: {
    type: String,
    default: ''
  }
})
</script>

<template>
  <div class="button-group flex align-items-center space-between">
    <div class="button-group-left flex align-items-center space-between">
      <div class="title mr-20">{{title}}</div>
      <div class="description">{{description}}</div>
    </div>
    <div class="button-group-right">
      <slot></slot>
    </div>
  </div>
</template>

<style scoped lang="scss">
.description{
  color: var(--info-color);
  font-size: var(--font-size-base);
  white-space: nowrap;
}
.title{
  font-size: var(--font-size-lg);
  white-space: nowrap;
}
</style>
